<template>
    <view class="page-box">
        <header class="header">
            <view class="top row bothSide verCenter">
                <text class="t1">团队成员服务费比例管理</text>
            </view>
            <view class="btn row rowCenter verCenter" @click="add()">
                <text class="iconfont icon-a-juxing3"></text>
                <text class="tt">添加产品</text>
            </view>
        </header>
        <view class="list column">
            <scroll-view scroll-y="true" style="height: calc(100vh - 260rpx);">
                <view class="box" v-for="(item,index) in myCommissionAmount" :key="index">
                    <view class="top row bothSide verCenter">
                        <view class="left row verCenter">
                            <text class="iconfont icon-a-tubiaochangyongsousuo41"></text>
                            <text class="tt">{{item.product_name}}</text>
                        </view>
                        <view class="right row verCenter">
                            <text class="t1" v-if="item.ration != 0">服务费比例：</text>
                            <text class="t2" v-if="item.ration != 0">{{item.ration}}</text>
                            <text class="iconfont icon-a-tubiaochangyongsousuo6" @click="delCommissionAmount(item.product_id)"></text>
                        </view>
                    </view>
                    <view class="wrap row bothSide">
                        <view class="text-item row verCenter">
                            <text class="label">产品成本：</text>
                            <text class="t2">{{item.product_cost}}</text>
                        </view>
                        <view class="text-item row verCenter">
                            <text class="label">期限：</text>
                            <text class="t1">{{item.loan_cycle}}</text>
                        </view>
                        <view class="text-item row verCenter">
                            <text class="label">平台成本：</text>
                            <text class="t2">{{item.platform_cost}}</text>
                        </view>
                        <view class="text-item row verCenter">
                            <text class="label">年利率：</text>
                            <text class="t1">{{item.annual_profit_rate}}</text>
                        </view>
                        <view class="text-item row verCenter" v-if="item.ration == 0">
                            <text class="label">产品佣金比例：</text>
                            <text class="t1">{{item.product_commission_ration}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 修改弹窗 -->
        <uni-popup ref="popup" background-color="#ffffff" border-radius="20rpx 20rpx 0 0">
            <view class="popup-content">
                <view class="title row rowCenter verCenter">修改{{filterData.product_name}}-服务费比例</view>
                <view class="input-box">
                    <input type="number" inputmode="decimal" placeholder="请输入服务费比例" class="uni-input" v-model="ration" />
                </view>
                <view class="popup-btn row bothSide verCenter">
                    <view class="btn-canel row rowCenter verCenter" @click="close">取消</view>
                    <view class="btn-ok row rowCenter verCenter" @click="updateCommissionAmount">保存</view>
                </view>
            </view>
        </uni-popup>
        <!-- 新增产品 -->
        <uni-popup ref="popupAdd" background-color="#ffffff" border-radius="20rpx">
            <view class="popup-content" style="width: 590rpx;">
                <view class="title row rowCenter verCenter">新增产品</view>
                <view class="choice row bothSide verCenter">
                    <picker @change="bindPickerChange($event)" :value="index" :range="list" :range-key="'name'" style="width: 100%;">
                        <view class="picker-wrap row bothSide verCenter" style="width: 100%;">
                            <text class="uni-text" :style="index === '' ? { color: '#c3c3c3' } : {}">{{ index === -1 ?  '请选择产品' : list[index].name}}</text>
                        </view>
                    </picker>
                    <text class="iconfont icon-juxing"></text>
                </view>
                <view class="input-box">
                    <input type="number" inputmode="decimal" placeholder="请输入产品服务费" class="uni-input" v-model="ration" />
                </view>
                <template v-if="index >= 0 && list[index]">
                    <view class="product_cost row avarage verCenter">
                        <view class="column rowCenter verCenter">
                            <text class="t1">产品成本</text>
                            <text class="t2">{{list[index].product_cost}}元</text>
                        </view>
                        <view class="column rowCenter verCenter">
                            <text class="t1">平台成本</text>
                            <text class="t2">{{list[index].platform_cost}}元</text>
                        </view>
                    </view>
                </template>
                <view class="popup-btn row bothSide verCenter">
                    <view class="btn-ok row rowCenter verCenter" @click="addCommissionAmount" style="width: 100%;">保存</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';

    export default {
        data() {
            return {
                from: '',
                list: '',
                index: -1,
                to_channel_user_id: '',
                myCommissionAmount: [],
                filterData: {},
                product_id: '', //产品id
                ration: '', //服务费比例
                searchParams: {
                    page: 1,
                    limit: 10
                }
            };
        },
        onLoad(options) {
            this.from = options.from;
            this.to_channel_user_id = options.channel_user_id;
        },
        onShow() {
            this.getData();
        },
        methods: {
            bindPickerChange(e) {
                this.index = e.detail.value;
                this.product_id = this.list[e.detail.value].value;
                this.ration = this.list[e.detail.value].ration;
            },
            getData() {
                if (this.to_channel_user_id) {
                    this.request(API.myCommissionAmount, 'GET', { to_channel_user_id: this.to_channel_user_id }, true).then(res => {
                        if (res.code === 0) {
                            this.myCommissionAmount = res.data;
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
                } else {
                    this.request(API.myCommissionAmount, 'GET', { to_channel_user_id: this.to_channel_user_id }, true).then(res => {
                        if (res.code === 0) {
                            this.myCommissionAmount = res.data;
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
                }
            },
            /**
             * 新增服务费
             */
            addCommissionAmount() {
                this.request(API.addCommissionAmount, 'POST', { to_channel_user_id: this.to_channel_user_id, product_id: this.product_id, ration: this.ration }, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '新增服务费成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            this.getData();
                            this.close();
                        }, 2000)
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 删除服务费
             */
            delCommissionAmount(product_id) {
                uni.showModal({
                    title: '',
                    content: '确定要删除服务费吗？',
                    success: res => {
                        if (res.confirm) {
                            this.request(API.delCommissionAmount, 'POST', { to_channel_user_id: this.to_channel_user_id, product_id: product_id }, true).then(res => {
                                if (res.code === 0) {
                                    uni.showToast({
                                        title: '删除服务费成功',
                                        icon: 'success'
                                    });
                                    setTimeout(() => {
                                        this.getData();
                                        this.close();
                                    }, 2000)
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: 'none'
                                    });
                                }
                            });
                        } else if (res.cancel) {
                            // 用户点击取消操作
                            console.log('用户点击取消');
                        }
                    }
                });
            },

            /**
             * 修改服务费 
             */
            updateCommissionAmount() {
                this.request(API.updateCommissionAmount, 'POST', { to_channel_user_id: this.to_channel_user_id, product_id: this.product_id, ration: this.ration }, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '修改服务费成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            this.getData();
                            this.close();
                        }, 2000)
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            add() {
                this.ration = ''; //清空服务费比率
                this.request(API.addCommissionGetproList, 'GET', { to_channel_user_id: this.to_channel_user_id }, true).then(res => {
                    if (res.code === 0) {
                        this.list = res.data.map((item) => {
                            return {
                                name: item.product_name,
                                value: item.product_id,
                                product_cost: item.product_cost,
                                is_have_mortgage: item.is_have_mortgage,
                                platform_cost: item.platform_cost,
                                ration: item.ration
                            }
                        });
                        this.$refs.popupAdd.open('center');
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });

            },
            open(index) {
                this.filterData = this.myCommissionAmount[index];
                this.ration = this.filterData.ration;
                this.product_id = this.filterData.product_id;
                this.$refs.popup.open('bottom');
            },
            close() {
                this.$refs.popup.close();
                this.$refs.popupAdd.close();
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '@/assets/css/mine/myCommission.scss';
</style>